<!--
 Copyright (C) <2018> Intel Corporation

 SPDX-License-Identifier: Apache-2.0
-->

<!DOCTYPE html>

<head>
  <meta charset="utf-8">
  <title>Intel&reg; Collaboration Suite for WebRTC P2P Direct Call Sample
  </title>
  <style>
    html {
      font-family: "intel-clear", "tahoma", "helvetica", "arial", sans-serif;
      font-size: 90%;
    }

    textarea {
      font-family: monospace;
      margin: 2px;
      height: 100px;
      width: 250px;
    }

    div#send {
      float: left;
      margin-right: 20px;
    }

    div#sendreceive {
      margin: 0 0 20px 0;
    }

    h2 {
      margin: 0 0 10px 0;
    }

    div#local {
      float: left;
      margin-right: 20px;
    }

    div#remote {
      float: left;
    }

    div#screen {
      float: left;
    }

    div#videocontainer {
      margin: 0 0 20px 0;
      width: 1300px;
      height: 700px;
    }

  </style>
</head>

<body>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"
    type="text/javascript"></script>
  <script
    src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/3.1.2/socket.io.js"
    type="text/javascript"></script>
  <script src="js/sc.websocket.js" type="text/javascript"></script>
  <!-- SDK Starts -->
  <script src="../../../dist/sdk-debug/owt.js" type="text/javascript"></script>
  <!-- SDK Stops -->
  <script src="js/peercall.js" type="text/javascript"></script>

  <h1>Intel<sup>&reg;</sup> Collaboration Suite for WebRTC</h1>
  <h2>P2P Sample</h2>
  <div id="description">
    <p>This sample works with the latest Chrome and Firefox.</p>
  </div>
  <div id="control">
    <p>
      <input id="uid" type="text" />
      <button id="login">Login</button>
      <button id="logoff">Logoff</button>
    </p>
    <p>
      <input id="remote-uid" type="text" />
      <button id="set-remote-uid">Set Remote ID</button>
    </p>
    <p>
      <button id="target-video-publish">Share Camera</button>
      <button id="target-video-unpublish">Stop Camera Sharing</button>
      <button id="target-peerconnection-stop">Stop Conversation</button>
      <button id="target-screen">Share Screen</button>
      <br>
      <br>
      <button id="mute-toggle">Mute/Unmute</button>
    </p>
  </div>
  <div id="sendreceive">
    <div id="send">
      <h2>Send data</h2>
      <textarea id="dataSent" rows="5" cols="10"></textarea>
    </div>
    <div id="receive">
      <h2>Received data</h2>
      <textarea id="dataReceived" rows="5" cols="10" disabled="true"></textarea>
    </div>
    <button id="data-send">Send data</button>
  </div>
  <div id="videocontainer">
    <div id="local">
      <h2>LocalView</h2>
      <video width="320px" height="240px" id="localVideo" playsinline muted
        autoplay></video>
    </div>
    <div id="remote">
      <h2>RemoteView</h2>
      <video width="320px" height="240px" id="remoteVideo" playsinline muted
        autoplay></video>
    </div>
    <div id="screen">
      <h2>ScreenView</h2>
      <video width="640px" height="480px" id="screenVideo" playsinline muted
        autoplay></video>
    </div>
  </div>

  <footer id="status"></footer>
  <div id="infoDiv"></div>
</body>
